<template>
  <div class="game-container">
    <!-- 回合提示条 -->
    <div class="turn-banner" :class="currentPlayer">
      玩家 {{ currentPlayer.slice(-1) }} 的回合
    </div>

    <div class="players-wrapper">
      <!-- 玩家A -->
      <div class="player player-a">
        <div class="player-header">
          <h2 class="player-name">玩家A</h2>
          <div class="hp-counter">❤️ 30</div>
        </div>
        <div class="cards-wrapper">
          <transition-group name="card-move" tag="div" class="cards">
            <img
                v-for="card in playerA.cards"
                :key="card.id"
                :src="getCardImage(card.id)"
                alt="Card"
                class="card"
                :class="{ disabled: currentPlayer !== 'playerA' }"
                @click="useCard('playerA', card.id)"
                @mouseenter="zoomCard"
                @mouseleave="resetCard"
            />
          </transition-group>
        </div>
      </div>

      <!-- 玩家B -->
      <div class="player player-b">
        <div class="player-header">
          <h2 class="player-name">玩家B</h2>
          <div class="hp-counter">❤️ 30</div>
        </div>
        <div class="cards-wrapper">
          <transition-group name="card-move" tag="div" class="cards">
            <img
                v-for="card in playerB.cards"
                :key="card.id"
                :src="getCardImage(card.id)"
                alt="Card"
                class="card"
                :class="{ disabled: currentPlayer !== 'playerB' }"
                @click="useCard('playerB', card.id)"
                @mouseenter="zoomCard"
                @mouseleave="resetCard"
            />
          </transition-group>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button class="btn start-turn" @click="startTurn">🎴 开始回合</button>
      <button class="btn end-turn" @click="endTurn">⏭️ 结束回合</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      playerA: {
        cards: [{ id: 1 }, { id: 2 }, { id: 3 }],
      },
      playerB: {
        cards: [{ id: 1 }, { id: 2 }, { id: 3 }],
      },
      currentPlayer: "playerA", // 当前玩家
    };
  },
  methods: {
    getCardImage(cardId) {
      // 使用 import.meta.url 动态加载图片
      return new URL(`/src/assets/${cardId}.png`, import.meta.url).href;
    },
    useCard(player, cardId) {
      if (this.currentPlayer !== player) {
        alert("轮到对方回合！");
        return;
      }

      const targetPlayer = player === "playerA" ? this.playerA : this.playerB;
      const cardIndex = targetPlayer.cards.findIndex((card) => card.id === cardId);
      if (cardIndex !== -1) {
        const card = targetPlayer.cards.splice(cardIndex, 1)[0]; // 移除卡牌
        this.playCardEffect(player, card);
      }
    },
    playCardEffect(player, card) {
      alert(`玩家${player.slice(-1)}使用了卡牌${card.id}`);
      // 可以在这里添加更多出牌效果
    },
    startTurn() {
      this.drawCard(this.currentPlayer);
      alert(`玩家${this.currentPlayer.slice(-1)}的回合开始`);
    },
    drawCard(player) {
      const newCardId = Math.floor(Math.random() * 9) + 1; // 随机生成一张卡牌（1到9）
      const targetPlayer = player === "playerA" ? this.playerA : this.playerB;
      targetPlayer.cards.push({ id: newCardId });
      alert(`玩家${player.slice(-1)}抽到了卡牌${newCardId}`);
    },
    endTurn() {
      this.currentPlayer = this.currentPlayer === "playerA" ? "playerB" : "playerA";
      alert(`轮到玩家${this.currentPlayer.slice(-1)}的回合`);
    },
  },
};
</script>

<<style scoped>
/* 基础样式 */
:root {
  --primary-color: #2c3e50;
  --secondary-color: #42b983;
  --player-a-color: #e74c3c;
  --player-b-color: #3498db;
}

.game-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #f0f2f5;
  min-height: 100vh;
}

/* 回合提示条 */
.turn-banner {
  text-align: center;
  padding: 15px;
  font-size: 24px;
  font-weight: bold;
  color: white;
  margin-bottom: 30px;
  animation: slideDown 0.5s ease;
}

.turn-banner.playerA { background: var(--player-a-color); }
.turn-banner.playerB { background: var(--player-b-color); }

/* 玩家布局 */
.players-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.player {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.player-name {
  margin: 0;
  font-size: 24px;
  color: var(--primary-color);
}

.hp-counter {
  font-size: 20px;
  background: #ffebee;
  padding: 8px 15px;
  border-radius: 20px;
}

/* 卡牌样式 */
.cards-wrapper {
  min-height: 200px;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card {
  width: 120px;
  height: 180px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border: 2px solid transparent;
}

.card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border-color: var(--secondary-color);
}

.card.disabled {
  opacity: 0.3;
  filter: grayscale(0.8);
  pointer-events: none;
}

/* 按钮样式 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.btn {
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.start-turn {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
}

.end-turn {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: white;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 动画 */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.card-move-enter-active,
.card-move-leave-active {
  transition: all 0.5s ease;
}

.card-move-enter-from,
.card-move-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .players-wrapper {
    grid-template-columns: 1fr;
  }

  .card {
    width: 90px;
    height: 135px;
  }
}
</style>